<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="shortcut icon" href="/img/favicon.ico"/>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="/common/layuimini/layuimini.css">
  <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
  <link rel="stylesheet" href="/common/layuimini/default.css">
  <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
  <style type="text/css">
    body{background-image: url("/img/article/bj.jpg");background-size: cover}
    .article-index-every{ width: 900px;margin: 10px auto;text-align: left;border-radius:10px;}
  </style>
</head>
<body>
<div class="layuimini-container article-head" style="margin: 10px auto;text-align: left;height: 50px;">
  <div style="text-align: center;margin: 0 auto;width: 1300px;">
    <div class="layui-form layui-form-pane">
      <div style="float: right; width: 200px; margin: 10px 25px;">
        <button style="" type="button" class="layui-btn layui-btn-normal layui-btn-fluid layui-btn-sm write-article-btn">创作博客</button>
      </div>
    </div>
    <div th:if="${session.user != null}" style="display: inline-block; float: right; margin: 15px">
      <input type="hidden" th:value="${session.user.id}" id="userId">
      <div style="">
        <span><a id="userNav">[[${session.user.nickname}]]</a></span>
      </div>
    </div>
    <div th:if="${session.user == null}" style="display: inline-block; float: right; margin: 15px">
      <div style="">
        <span><a href="/login">登录 | 注册</a></span>
      </div>
    </div>
  </div>
</div>

<div class="article-main" style=" text-align: center;margin: 0 auto;width: 1300px;">
  <div style="width: 100px; margin: 53px 20px; float: left; text-align: center;">
    <!--首页左侧分类展示-->
    <ul class="layui-menu" id="articleCategory" style="border-radius: 15px;"></ul>
  </div>
  <div style="width: auto;float: left;">
    <div class="layuimini-container article-index-every">
      <input onclick="queryArticleByTitle()" id="selectInput" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入查询的博客标题" class="layui-input">
    </div>
    <div id="articleIndexShow">

    </div>
  </div>
  <div style="float:left;margin: 15px 20px; width: 200px;">
    <!--首页个人中心-->
    <div th:if="${session.user != null}">
      <div class="layui-bg-gray" style="padding: 10px; height: 200px;">
        <div style="float: left;">
          <img src="/file/headImg/default.png" style="width: 50px; height: 50px;" class="layui-circle">
        </div>
        <div style="float: right;">
          <dl>
            <dt style="margin: 5px;"><a href="javascript:personalCenter()">admin</a></dt>
            <dd>码龄半年</dd>
          </dl>
        </div>
        <br><br><br><hr>
      </div>
    </div>
  </div>
</div>
<!--首页数据展示-->
</body>
<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript">
  window.onload = function () {
    initIndex();
  }

  //回车登录(按钮绑定回车)
  document.onkeydown = function(){
    if(event.keyCode == "13"){
      document.getElementById("selectInput").click();
    }
  }

  //回车登录(按钮绑定回车)
  // document.onkeydown = function(){
  //   if(event.keyCode == "13"){
  //     document.getElementById("selectInput").click();
  //   }
  // }


  function personalCenter(){
    var userId = $("#userId").val();
    window.location.href="/user/index/personCenter";
  }
  //获取首页博客列表展示以及博客分类展示
  function initIndex(){
    $.ajax({
      type: "get",
      url: "article/index/queryAllArticle",
      success: function (res){
        console.log("==========================");
        console.log(res);
        var data = res.data;
        var articleList = indexArticleShow(data)
        $("#articleIndexShow").html(articleList);
      }
    })
    $.ajax({
      type: "post",
      url: "category/queryAllCategory",
      success: function (res){
        console.log(res.data);
        var str = indexArticleCategoryShow(res.data);
        $("#articleCategory").html(str);
      }
    })
  }

  function queryArticleByTitle(){
    const selectInput = $("#selectInput").val();
    if (selectInput === ''){
      return;
    }
    $.ajax({
      url: "article/index/queryArticleByTitle",
      type: "get",
      data: {
        "selectInput": selectInput
      },
      success: function (res){
        console.log(res);
        var articleList = indexArticleShow(res.data);
        $("#articleIndexShow").html(articleList);
      }
    })
  }

  /**
   * 博客展示
   */
  function indexArticleShow(data){
    var str = '';
    if (data.length == 0){
      str = '<div class="layuimini-container article-index-every" style="height: 23px;"><h3>没有发布博客哦</h3></div>';
      return str;
    }
    // str = "<div class=\"layuimini-container article-index-every\"><input oninput=\"queryArticleByTitle()\" id=\"selectInput\" type=\"text\" name=\"title\" lay-verify=\"title\" autocomplete=\"off\" placeholder=\"请输入查询的博客标题\" class=\"layui-input\"></div>"
    for (var i = 0; i < data.length; i++) {
      str = str + '<div class="layuimini-container article-index-every">\n' +
              '    <div class="layuimini-main">\n' +
              '      <h2><a href="javascript:void(0)" onclick="getArticleDetail(\''+data[i].articleNum+'\')">'+data[i].title+'</a></h2>\n' +
              '    </div>\n' +
              '    <div class="layuimini-main">\n' +
              '      <a>'+data[i].nickname+'</a>&nbsp;&nbsp;\n' +
              '      <a>'+data[i].createTime+'</a>&nbsp;&nbsp;\n';
      if (data[i].categoryName != undefined){
        var arr = data[i].categoryName.split(',');
        for (var j = 0; j < arr.length; j++) {
          str = str + '<span class="layui-badge-rim"><a href="/article/categoty/'+arr[j]+'">'+arr[j]+'</a></span>\n'
        }
      }
      str = str + '    </div>\n' + '  </div>';
    }
    return str;
  }

  function getArticleDetail(articleNum){
    window.open("/article/getArticleDetail/"+articleNum);
  }

  /**
   * 循环拼接首页博客分类
   * @param data 博客json数据
   * @returns {string}
   */
  function indexArticleCategoryShow(data){
    var str = '<li>\n' +
            '      <div class="layui-menu-body-title" onclick="getAllArticle()">全部</div>\n' +
            '    </li>';
    for (var i = 0; i < data.length; i++) {
      str = str +'<li>\n' +
              '      <div class="layui-menu-body-title" onclick="getArticleByCategory(\''+data[i].categoryName+'\')">'+data[i].categoryName+'</div>\n' +
              '    </li>'
    }
    return str;
  }

  function getArticleByCategory(category){
    console.log("==========");
    $.ajax({
      type: "post",
      url: "article/index/queryArticleByCategory",
      data: {
        "category": category
      },
      success: function (res){
        var articleList = indexArticleShow(res.data);
        $("#articleIndexShow").html(articleList);
      }
    })
  }

  function getAllArticle(){
    $.ajax({
      type: "get",
      url: "article/index/queryAllArticle",
      success: function (res){
        console.log(res);
        var data = res.data;
        var articleList = indexArticleShow(data)
        $("#articleIndexShow").html(articleList);
      }
    })
  }
  function toLoginOrRegister(){
    alert('login')
  }
  $(".write-article-btn").click(function (){
    window.location.href="/article/write";
  })

  layui.use(['dropdown'],function (){
    var dropdown = layui.dropdown;



    dropdown.render({
      elem: '#userNav'
      ,trigger: 'hover'
      ,align: 'center'
      ,style: 'text-align: center'
      ,data: [{
        title: '个人中心'
        ,id: 'person'
      }
      // ,{
      //     title: '草稿箱'
      //     ,id: 'draft'
      //   }
        ,{
        title: '退出登录'
        ,id: 'logout'
      }],
      click: function(obj){
        if (obj.id == 'person'){
          var userId = $("#userId").val();
          window.location.href="/user/index/personCenter";
        }
        if (obj.id == 'logout'){
          layer.confirm('确定要退出登录吗', {
            btn: ['确定','取消'] //按钮
          }, function(){
            window.location.href = "/user/logout"
          }, function(){
          });
        }
        if (obj.id == 'draft'){
          window.location.href="/index/articleDraft";
        }
      }
    });
  })
</script>
</html>
